<template>
  <div class="contentbox flex-col">
    <el-card class="card-margin flex-col">
      <el-descriptions
        title="系统权限信息"
        size="medium"
        :column="1"
        :colon="false"
      >
        <el-descriptions-item>
          <div class="taskview-top">
            <span>用户名：</span>
            <el-input placeholder="请输入检索"> </el-input>

            <el-button type="primary">搜索</el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="taskmain flex-col">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          height="100%"
        >
          <el-table-column prop="name" label="序号" width="120" 
     type="index" :index="table_index">
          </el-table-column>
          <el-table-column prop="userName" label="用户名"> </el-table-column>
          <el-table-column prop="roleName" label="角色"> </el-table-column>
          <el-table-column prop="userDetails" label="设备范围">
          </el-table-column>
          <el-table-column prop="creatTime" label="创建时间"> </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button
                type="text"
                @click="
                  () => {
                    userUpdateVisable = true;
                  }
                "
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="->,total,sizes,prev, pager, next,jumper"
          :total="total"
          :current-page="pageNum"
          :page-sizes="[20, 40, 60, 100]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>

        <el-dialog :visible.sync="userUpdateVisable" width="30%">
          <span slot="title" style="text-align: center"
            >修改用户
            <el-divider></el-divider>
          </span>
          <el-form :model="userMsgForm" label-width="200px">
            <el-form-item label="用户名">
              <label> {{ userMsgForm.userName }}</label>
            </el-form-item>
            <el-form-item label="用户角色">
              <el-input
                v-model="userMsgForm.desc"
                style="width: 50%"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备范围">
              <el-cascader
                style="width: 50%"
                :options="treeData"
                :props="props"
                collapse-tags
                clearable
              ></el-cascader>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-divider></el-divider>
            <div>
              <el-button @click="userUpdateVisable = false">取 消</el-button>
              <el-button
                type="primary"
                @click="
                  () => {
                    userUpdateVisable = false;
                  }
                "
                >确 定</el-button
              >
            </div>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import $http from "@/utils/apiHelper";
export default {
  components: {},
  props: {},
  data() {
    return {
      userMsgForm: {},
      treeData: "",
      userUpdateVisable: false,
      pageNum: 1,
      pageSize: 20,
      total: 1,
      props: {
        multiple: true,
        label: "DisplayName",
        value: "StructGuid",
        children: "Children",
      },
      tableData: [
        {
          userName: "admin",
          roleName: "超级管理员",
          creatTime: "",
          userDetails: "",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    table_index(index){
        return (this.pageNum-1) * this.pageSize + index + 1
},
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    handleEdit() {},
    Refresh() {
      $http.get("/EqManage/GetLineProcessDevPLCInfo").then((res) => {
        this.treeData = res.Data;
      });
    },
  },
  created() {
    this.Refresh();
  },
  mounted() {},
};
</script>
